<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import MaterialButton from "@/components/MaterialButton.vue";
import vueMkHeader from "@/assets/img/home/map/bg.png";
import mapImg from "@/assets/img/home/map/map.png";
import redIcon from "@/assets/img/home/map/red.png";
const router = useRouter();
let firstBgNum = ref(1);
</script>
<template>
    <div class="page-header header-height" data-aos="fade-right" :style="`background-image: url(${vueMkHeader});`" loading="lazy">
        <div class="container">
            <div class="d-flex">
                <h1 class="text-f-ERASBD"><span class="text-black">Our</span>&nbsp<span class="text-red">Company</span></h1>
            </div>
            <div class="row">
                <div class="col-lg-9">
                    <div style="position: relative"><img class="img-fluid" :src="mapImg" alt="" /> <img :src="redIcon" alt="" style="position: absolute; width: 7%; top: 50%; left: 12%" /><img :src="redIcon" alt="" style="position: absolute; width: 7%; top: 50%; right: 30%" /><img :src="redIcon" alt="" style="position: absolute; width: 7%; bottom: 7%; left: 48%" /></div>
                </div>
                <div class="col-lg-1"></div>
                <div class="col-lg-2 d-flex" style="flex-direction: column; align-items: center">
                    <div :class="`box-item ${firstBgNum == 1 ? 'box-item-bg' : ''}`" @mouseenter="firstBgNum = 1" @mouseleave="firstBgShow = 0">
                        <h1>10</h1>
                        <div>years</div>
                    </div>
                    <div :class="`box-item ${firstBgNum == 2 ? 'box-item-bg' : ''}`" @mouseenter="firstBgNum = 2" @mouseleave="firstBgShow = 0">
                        <h1>3</h1>
                        <div>Product Line</div>
                    </div>
                    <div :class="`box-item ${firstBgNum == 3 ? 'box-item-bg' : ''}`" @mouseenter="firstBgNum = 3" @mouseleave="firstBgShow = 0">
                        <h1>10000+</h1>
                        <div>Service users</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.header-height {
    min-height: 100vh !important;
}
@media (max-width: 1000px) {
    .header-height {
        min-height: 40vh !important;
    }
}
.box-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 160px;
}
.box-item h1 {
    color: #000 !important;
}
.box-item-bg {
    color: #fff !important;
    background: #ed1c24;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
    border-radius: 20px 20px 20px 20px;
    transition: background 0.5s;
}

.box-item-bg h1 {
    color: #fff !important;
}
</style>
